<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/common/global.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>个人记帐</title>
    <link rel="stylesheet" type="text/css" href="${staticPath }/resources/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="${staticPath }/resources/css/core.css"/>
    <link rel="stylesheet" type="text/css" href="${staticPath }/resources/css/tabs.css"/>
    <!-- 数字键盘样式  开始了  -->
    <link rel="stylesheet" type="text/css" href="${staticPath }/resources/css/key.css"/>
    <!-- 数字键盘样式 结束了  -->

    <!-- paste this code into your webpage -->
    <link href="${staticPath }/resources/table/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />

    <!-- end -->

    <style type="text/css">
        #tb_do_list.table tr td{
            height:15px;
        }

    </style>
    <%@include file="/common/com.jsp"%>
    <script type="text/javascript" src="${staticPath }/resources/js/num.js"></script>
    <script type="text/javascript" src="${staticPath }/resources/js/ip.js"></script>
    <script type="text/javascript">
        function changeColor(obj,color){
            obj.bgColor = color ;
        }
    </script>
    <!--  头部导航 start  -->
    <script type="text/javascript">
        $(function(e){
            var startTop = $("#top_nav_fixed").offset().top;
            $(window).scroll(function(e){
                var scrollLong = $(document).scrollTop();
                if(scrollLong > 27){
                    $("#top_nav_fixed").css("position","fixed");
                    $("#top_nav_fixed").css("top","0");
                }else if(scrollLong <=27){
                    $("#top_nav_fixed").css("position","fixed");
                    $("#top_nav_fixed").css("top","");
                    $("#top_nav_fixed").css("top","27");
                }
            });
        });
    </script>   <!--  头部导航 end  -->
    <script type="text/javascript">
        var basePath = "${staticPath }";

    </script>
</head>
<body>

<!-- 顶端top头开始-->
<div class="top">
    <div>
        <ul>
            <c:if test="${sessionScope.user==null}" var="u">
                <li class="top_regist"><a href="${path}/front/toregist">注册</a></li>
                <li><a href="${staticPath}/front/tologin">登陆</a><span>|</span></li>
            </c:if>
            <c:if test="${!u}">
                <li><a href="${path}/front/logout">退出</a><span>|</span></li>
                <li class="top_regist"><a href="${path}/user/index">${sessionScope.user.username}</a></li>

            </c:if>

            <li><a href="#">帮助</a><span>|</span></li>
            <li><a href="#">贷款</a><span>|</span></li>
            <li><a href="#">理财</a><span>|</span></li>
            <li><a href="${path}/jizhang/index">记账</a><span>|</span></li>
          <%--  <li><a href="${path}/index"><img src="${staticPath}/resources/image/icon/home.png"/>首页</a><span>|</span></li>--%>
        </ul>
    </div>
</div>
<!-- 顶端top头结束-->
<!-- 中部 -->
<div class="wrap">
    <!-- 头部导航区 -->
    <div class="nav" id="top_nav_fixed">
        <div class="nav_left">
         <%--   <img src="${staticPath}/resources/image/logo_core.png"/>--%>
        </div>
        <div class="nav_right">
            <ul>
                <li><a href="${path}/bbs/index">社区</a></li>
                <li><a href="${path}/report/index">报表</a></li>
                <li><a href="${path}/front/accountlist">账户</a></li>
                <li><a href="${path}/jizhang/index">记账</a></li>
                <li><a href="#">概览</a></li>
            </ul>
        </div>
    </div><!-- 头部导航区结-->

    <!-- 内容区 start -->
    <div class="content">
        <!-- tab container  开始   -->
        <div id="notice" class="notice">
            <!-- tab卡开始 -->
            <div id="notice-tit" class="notice-tit">
                <ul>
                    <li ><a href="#">支出</a></li>
                    <li><a href="#">收入</a></li>
                    <li><a href="#">转账</a></li>
                    <li><a href="#">借入</a></li>
                    <li><a href="#">借出</a></li>
                    <li><a href="#">还款</a></li>
                    <li><a href="#">收债</a></li>
                </ul>
            </div><!-- tab卡结束 -->
            <!-- tab内容开始 -->
            <div id="notice-con" class="notice-con">
                <!-- 支出开始 -->
                <form  method="post" id="zhicuform">
                    <div class="mod" style="display:none;">

                        <label>
                            分类<select id="ctid" name="ctid" style="width:150px;height:30px;">
                            <c:forEach items="${type_zichu_list}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                        </label>
                        <label>
                            账户<select id="acc_id" name="acc_id" style="width:150px;height:30px;">
                            <c:forEach items="${userAccountList}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>

                        </select>
                        </label>
                        <label>
                            金额<input  name="money" id="txtPwd"  style="width:150px;height:30px;"/>

                        </label>
                        <label>
                            时间<input type="text" id="date" name="date" class="sang_Calender" style="width:150px;height:30px;"/>
                        </label>
                        <br />
                        <label>
                            备注<input type="text" id="detail" name="detail" style="width:524px;height:30px;"/>
                        </label>


                        <label>
                            <input type="button" value="保存" id="zhicuformBtn" style="width:80px;height:30px;margin-left:30px;"/>
                        </label>

                    </div><!-- 支出结束 -->
                </form>
                <!-- 收入开始 -->

                <form  method="post" id="shouruform">
                    <div class="mod"  style="display:none;">


                        <label>
                            分类<select id="ctid_shouru" name="ctid" style="width:150px;height:30px;">
                            <c:forEach items="${type_souru_list}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                        </label>
                        <label>
                            账户<select id="acc_id_shouru" name="acc_id" style="width:150px;height:30px;">
                            <c:forEach items="${userAccountList}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                        </label>
                        <label>
                            金额<input name="" id="shouru"  style="width:150px;height:30px;"/>

                        </label>
                        <label>
                            时间<input id="date_shouru" type="text" name="date" class="sang_Calender" style="width:150px;height:30px;"/>
                        </label>
                        <br />
                        <label>
                            备注<input type="text" id="detail_shouru" name="detail" style="width:524px;height:30px;"/>
                        </label>
                        <label>
                            <input id="shouruformBtn" type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                        </label>
                    </div> <!-- 收入结束 -->
                </form>

                <!-- 转账开始  -->
                <div class="mod"  style="display:none;">


                    <label>
                        转出<select id="accountOutId_zhuangchu" name="accountOutId_zhuangchu" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <option value="${item.id}">${item.name}</option>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        转入<select id="accountInId_zhuangchu" name="accountOutId_zhuangchu" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <option value="${item.id}">${item.name}</option>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        金额<input name="transfer" id="transfer"  style="width:150px;height:30px;"/>

                    </label>
                    <label>
                        时间<input id="date_zhuangzhang" type="text" name="" class="sang_Calender" style="width:150px;height:30px;"/>
                    </label>
                    <br />
                    <label>
                        备注<input id="detail_zhuangzhang" type="text" name="detail_zhuangzhang" style="width:524px;height:30px;"/>
                    </label>
                    <label>
                        <input id="zhuangzhangBtn" type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>
                </div>  <!-- 转账结束  -->

                <!-- 借入开始 -->
                <div class="mod"  style="display:none;">


                    <label>
                        负债账户<select id="accountOutId_jianru" name="accountOutId_jianru" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype=='负债账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>

                    </select>
                    </label>
                    <label>
                        存入账户<select id="accountInId_jianru" name="accountInId_jianru" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${!(item.accounttype=='负债账户'|| item.accounttype=='债权账户')}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        金额<input name="" id="jieru"  style="width:150px;height:30px;"/>

                    </label>
                    <label>
                        时间<input id="date_jianru" type="text" name="" class="sang_Calender" style="width:150px;height:30px;"/>
                    </label>
                    <br />
                    <label>
                        备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注<input id="detail_jieru" type="text" name="" style="width:554px;height:30px;"/>
                    </label>
                    <label>
                        <input id="jianruBtn" type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>

                </div> <!--  借入结束  -->
                <!-- 借出开始  -->
                <div class="mod"  style="display:none;">
                    <label>
                        转出账户<select id="accountOutId_jiancu" name="accountOutId_jiancu" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype!='债权账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        债权账户<select id="accountInId_jiancu" name="" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype=='债权账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        金额<input name="jiecu" id="jiecu"  style="width:150px;height:30px;"/>

                    </label>
                    <label>
                        时间<input id="date_jiancu" type="text" name="date_jiancu" class="sang_Calender" style="width:150px;height:30px;"/>
                    </label>
                    <br />
                    <label>
                        备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注<input id="detail_jiecu" type="text" name="detail_jiecu" style="width:554px;height:30px;"/>
                    </label>
                    <label>
                       <input id="jiancuBtn" type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>

                </div> <!-- 借出结束  -->

                <!--  还款开始  -->
                <div class="mod"  style="display:none;">
                    <label>
                        转出账户<select id="accountOutId_huankuan" name="acc_id" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype!='债权账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        负债账户<select id="accountInId_huankuan" name="" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype=='负债账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>

                    </select>
                    </label>
                    <label>
                        金额<input name="" id="huankuan"  style="width:150px;height:30px;"/>

                    </label>
                    <label>
                        时间<input id="date_huankuan" type="text" name="" class="sang_Calender" style="width:150px;height:30px;"/>
                    </label>
                    <br />
                    <label>
                        备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注<input id="detail_huankuan" type="text" name="" style="width:554px;height:30px;"/>
                    </label>
                    <label>
                        <input id="huankuanBtn"  type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>

                </div>
                <!--  还款结束  -->

                <!--  收债开始 -->
                <div class="mod"  style="display:none;">
                    <label>
                        债权账户<select id="accountOutId_shouzai" name="" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype=='债权账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        存入账户<select id="accountInId_shouzai" name="acc_id" style="width:150px;height:30px;">
                        <c:forEach items="${userAccountList}" var="item">
                            <c:if test="${item.accounttype!='债权账户'}">
                                <option value="${item.id}">${item.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    </label>
                    <label>
                        金额<input name="" id="souzai"  style="width:150px;height:30px;"/>

                    </label>
                    <label>
                        时间<input id="date_shouzai" type="text" name="" class="sang_Calender" style="width:150px;height:30px;"/>
                    </label>
                    <br />
                    <label>
                        备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注<input id="detail_shouzai" type="text" name="" style="width:554px;height:30px;"/>
                    </label>
                    <label>
                        <input id="shouzaiBtn" type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>

                </div>  <!--  收债结束 -->
            </div> <!-- tab内容结束 -->

            <!-- 账目清单  开始 -->
            <div class="money_list">
                &nbsp;&nbsp;<h1>&nbsp;&nbsp;账目清单&nbsp;&nbsp;<span id="tag_start">${start}</span>-<span id="tag_end">${end}</span></h1>
                &nbsp; <span>从<input type="text" id="start" name="start" class="sang_Calender" style="width:150px;height:20px;"/>到<input type="text" id="end" name="end" class="sang_Calender" style="width:150px;height:20px;"/>
            <input id="do_list_search_btn" type="button" name="do_list_search_btn" value="确定"/>
            <br><br>
            </span>
                <table id="tb_do_list" border="1" cellpadding="5" cellspacing="0" bgcolor="F2F2F2" width="100%" height="">

                </table>
            </div>   <!-- 账目清单  结束 -->

        </div>	<!-- tab container  结束   -->
    </div>  <!-- 内容区结束 -->
</div>  <!-- 中部结束 -->


<!--copyright开始-->
<div class="copyright clearfix" id="copyright">
    <div class="copyright_content">
        <ul>
            <li>关于
                <ul>
                    <li>品牌故事</li>
                    <li>联系我们</li>
                    <li>加入我们</li>
                    <li>版权声明</li>
                </ul>
            </li>
            <li>课程
                <ul>
                    <li>PHP开发</li>
                    <li>前端开发</li>
                    <li>JAVA开发</li>
                    <li>Android开发</li>
                </ul>
            </li>
            <li>关注
                <ul>
                    <li>新浪微博</li>
                    <li>腾讯微博</li>
                    <li>企业微信</li>
                    <li>QQ空间</li>
                </ul>
            </li>
            <li>留言
                <ul>
                    <li>意见反馈</li>
                    <li>问题留言</li>
                    <li>媒体联络</li>
                    <li>在线客服</li>
                </ul>
            </li>
            <li><img src="${staticPath}/resources/image/weixin.png" alt="微信关注" width="30" height="27" />微信关注
                <ul>
                    <li><img src="${staticPath}/resources/image/qrcode.jpg" alt="扫描关官方微信" width="102" height="102" /></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--copyright_content结束-->
</div>  <!--copyright结束-->


<!-- tab 选项卡切换 start  -->
<script type="text/javascript" src="${staticPath}/resources/js/tabs.js"></script>


<script type="text/javascript" src="${staticPath}/resources/js/datetime.js"></script>

<script type="text/javascript" src="${staticPath }/resources/js/jizhang/jizhang.js"></script>
<script type="text/javascript">
    function stringToDate(fDate) {
        var fullDate = fDate.split("-");

        return new Date(fullDate[0], fullDate[1]-1, fullDate[2], 0, 0, 0);
    }

    $(function () {

        jizhang.list_do_list();

        $("#zhicuformBtn").click(function () {

            var money = $("#txtPwd").val();
            var date = $("#date").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){

                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.zhicu();
            }

        });

        $("#shouruformBtn").click(function () {

            var money = $("#shouru").val();
            var date = $("#date_shouru").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){

                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.shouru();
            }

        });

        $("#zhuangzhangBtn").click(function () {

            var money = $("#transfer").val();
            var date = $("#date_zhuangzhang").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){

                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.zhuangzhuang();
            }

        });

        $("#jianruBtn").click(function () {

            var money = $("#jieru").val();
            var date = $("#date_jianru").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){

                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.jianru();
            }

        });

        $("#jiancuBtn").click(function(){

            var money = $("#jiecu").val();
            var date = $("#date_jiancu").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){


                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.jiancu();
            }

        });

        $("#huankuanBtn").click(function(){

            var money = $("#huankuan").val();
            var date = $("#date_huankuan").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){


                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.huankuan();
            }

        });

        $("#shouzaiBtn").click(function () {

            var money = $("#souzai").val();
            var date = $("#date_shouzai").val();

            if(money==null||money==""){

                alert("金额不能为空");
            }else if(!money.match(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/)){


                alert("金额格式不对,小数位最多2");
            }else if(date==null||date==""){

                alert("日期不能为空");
            }else{
                jizhang.shouzai();
            }

        });

        $("#do_list_search_btn").click(function () {
            var start = $("#start").val();
            var end = $("#end").val();

            if(  start==null||start==""||end==null||end=="" ){

                alert("请输入开始时间和结束的时间");
            }else{

                $("#tag_start").html(start);
                $("#tag_end").html(end);
                jizhang.list_do_list();
            }




        });

    });


</script>


<script type="text/javascript" src="${staticPath }/resources/table/tablecloth.js"></script>

</body>
</html>
